<template>
    <div>
        
        <e-charts :options="pieOptions" autoresize />
    </div>
</template>
  
<script>
import { ECharts } from 'vue-echarts'
import { use } from 'echarts/core'

// import ECharts modules manually to reduce bundle size
import {
    PieChart
} from 'echarts/charts'
import {
    TooltipComponent,
    LegendComponent
} from 'echarts/components'
import {
    CanvasRenderer
} from 'echarts/renderers'

use([
    PieChart,
    TooltipComponent,
    LegendComponent,
    CanvasRenderer
]);

export default {
    components: {
        'v-chart': ECharts
    },
    data() {
        return {
            pieOptions: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: this.departments
                },
                series: [
                    {
                        name: '部门',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: this.employeeData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    computed: {
        departments() {
            // 从 employeelist 中获取所有的部门
            return [...new Set(this.employeelist.map(employee => employee.department))];
        },
        employeeData() {
            // 根据部门分类统计员工数量
            return this.departments.map(department => {
                return {
                    value: this.employeelist.filter(employee => employee.department === department).length,
                    name: department
                }
            });
        }
    },
    props: {
        // 
        employeelist: {
            type: Array,
            required: true
        }
    }
}
</script>